<script setup>
	import { defineProps, defineEmits, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { CloseOutlined } from '@ant-design/icons-vue'
	import { useSimpleQueryStore } from '@/views/plugin/dashboard/store/simpleQuery'
	const store = useSimpleQueryStore()
	const props = defineProps({
		conditions: {
			type: Array,
			default: () => []
		},
		fieldList: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['update:conditions', 'add', 'remove'])

	// 条件编辑弹出层相关
	const conditionPopoverVisible = ref(false)
	const currentCondition = ref(null)
	const currentIndex = ref(-1)
	const tempCondition = ref({
		field: '',
		operator: 'eq',
		value: ''
	})

	// 获取操作符的中文描述
	const getOperatorText = (operator) => {
		const operatorMap = {
			eq: '等于',
			neq: '不等于',
			gt: '大于',
			gte: '大于等于',
			lt: '小于',
			lte: '小于等于',
			contains: '包含',
			not_contains: '不包含',
			starts_with: '开始以',
			not_starts_with: '不是开始以',
			ends_with: '结束以',
			not_ends_with: '不是结束以',
			is_null: '是null',
			is_not_null: '不是null',
			is_empty: '是空的',
			is_not_empty: '不是空的',
			between: '介于',
			not_between: '不介于'
		}
		return operatorMap[operator] || operator
	}

	// 获取字段名称
	const getFieldName = (fieldKey) => {
		const field = store.formData.itemConfig?.columns.find((col) => col.key === fieldKey)
		return field ? field.title : fieldKey
	}

	// 添加条件
	const addCondition = () => {
		if (!store.formData.itemConfig.tableName) {
			message.warning('请先选择数据表')
			return
		}
		currentIndex.value = -1
		tempCondition.value = {
			field: '',
			operator: 'eq',
			value: ''
		}
		conditionPopoverVisible.value = true
	}

	// 编辑条件
	const editCondition = (condition, index) => {
		currentIndex.value = index
		tempCondition.value = { ...condition }
		conditionPopoverVisible.value = true
	}

	// 确认条件
	const confirmCondition = () => {
		if (!tempCondition.value.field) {
			message.warning('请选择字段')
			return
		}
		if (!store.formData.itemConfig?.conditions) {
			store.formData.itemConfig.conditions = []
		}
		if (currentIndex.value === -1) {
			store.formData.itemConfig?.conditions.push({ ...tempCondition.value })
		} else {
			store.formData.itemConfig.conditions[currentIndex.value] = { ...tempCondition.value }
		}
		conditionPopoverVisible.value = false
		// 触发父组件的查询方法
		emit('refreshFun')
	}

	// 删除条件
	const removeCondition = (index) => {
		store.formData.itemConfig?.conditions?.splice(index, 1)
	}

	// 排序编辑弹出层相关
	const sortPopoverVisible = ref(false)
	const currentSort = ref(null)
	const currentSortIndex = ref(-1)
	const tempSort = ref({
		field: '',
		order: 'asc'
	})

	// 获取排序方式的中文描述
	const getSortOrderText = (order) => {
		const orderMap = {
			asc: '正序',
			desc: '倒序'
		}
		return orderMap[order] || order
	}

	// 添加排序
	const addSort = () => {
		if (!store.formData.itemConfig.tableName) {
			message.warning('请先选择数据表')
			return
		}
		currentSortIndex.value = -1
		tempSort.value = {
			field: '',
			order: 'asc'
		}
		sortPopoverVisible.value = true
	}

	// 编辑排序
	const editSort = (sort, index) => {
		currentSortIndex.value = index
		tempSort.value = { ...sort }
		sortPopoverVisible.value = true
	}

	// 确认排序
	const confirmSort = () => {
		if (!tempSort.value.field) {
			message.warning('请选择字段')
			return
		}
		if (!store.formData.itemConfig.sorts) {
			store.formData.itemConfig.sorts = []
		}
		if (currentSortIndex.value === -1) {
			store.formData.itemConfig.sorts.push({ ...tempSort.value })
		} else {
			store.formData.itemConfig.sorts[currentSortIndex.value] = { ...tempSort.value }
		}
		sortPopoverVisible.value = false
		// 触发父组件的查询方法
		emit('refreshFun')
	}

	// 删除排序
	const removeSort = (index) => {
		store.formData.itemConfig.sorts.splice(index, 1)
	}
</script>

<template>
	<div class="query-conditions bg-gray-50 p-4 rounded mb-4">
		<a-row :gutter="24">
			<a-col :span="12">
				<!-- 筛选条件区域 -->
				<div class="filter-section">
					<div class="flex items-center justify-between mb-2">
						<span class="font-medium">筛选</span>
						<!-- 条件编辑弹出层 -->
						<a-popover
							v-model:open="conditionPopoverVisible"
							trigger="click"
							placement="bottom"
							:destroyTooltipOnHide="true"
						>
							<template #content>
								<div class="condition-editor p-4">
									<div class="flex items-center gap-2 mb-4">
										<a-select
											v-model:value="tempCondition.field"
											placeholder="选择字段"
											class="w-60"
											:options="store.formData.itemConfig?.columns.map((col) => ({ value: col.key, label: col.title }))"
										>
										</a-select>
										<a-select v-model:value="tempCondition.operator" class="w-24">
											<a-select-option value="eq">等于</a-select-option>
											<a-select-option value="neq">不等于</a-select-option>
											<a-select-option value="gt">大于</a-select-option>
											<a-select-option value="gte">大于等于</a-select-option>
											<a-select-option value="lt">小于</a-select-option>
											<a-select-option value="lte">小于等于</a-select-option>
											<a-select-option value="contains">包含</a-select-option>
											<a-select-option value="not_contains">不包含</a-select-option>
											<a-select-option value="starts_with">开始以</a-select-option>
											<a-select-option value="not_starts_with">不是开始以</a-select-option>
											<a-select-option value="ends_with">结束以</a-select-option>
											<a-select-option value="not_ends_with">不是结束以</a-select-option>
											<a-select-option value="is_null">是null</a-select-option>
											<a-select-option value="is_not_null">不是null</a-select-option>
											<a-select-option value="is_empty">是空的</a-select-option>
											<a-select-option value="is_not_empty">不是空的</a-select-option>
											<a-select-option value="between">介于</a-select-option>
											<a-select-option value="not_between">不介于</a-select-option>
										</a-select>
									</div>
									<div class="mb-4">
										<template
											v-if="['is_null', 'is_not_null', 'is_empty', 'is_not_empty'].includes(tempCondition.operator)"
										>
											<div></div>
										</template>
										<template v-else-if="['between', 'not_between'].includes(tempCondition.operator)">
											<div class="flex items-center gap-2">
												<a-input v-model:value="tempCondition.value[0]" placeholder="最小值" class="w-32" />
												<span>-</span>
												<a-input v-model:value="tempCondition.value[1]" placeholder="最大值" class="w-32" />
											</div>
										</template>
										<template v-else>
											<a-input v-model:value="tempCondition.value" placeholder="请输入值" class="w-full" />
										</template>
									</div>
									<div class="flex justify-end gap-2">
										<a-button @click="conditionPopoverVisible = false">取消</a-button>
										<a-button type="primary" @click="confirmCondition">确定</a-button>
									</div>
								</div>
							</template>
							<a-button type="link" @click="addCondition">添加条件</a-button>
						</a-popover>
					</div>
					<div v-if="store.formData.itemConfig?.conditions?.length > 0" class="conditions-list grid grid-cols-2 gap-2">
						<div
							v-for="(condition, index) in store.formData.itemConfig?.conditions"
							:key="index"
							class="flex items-center"
						>
							<a
								href="javascript:void(0)"
								class="condition-link text-blue-600 hover:text-blue-800 mr-2"
								@click="editCondition(condition, index)"
							>
								{{ getFieldName(condition.field) }} {{ getOperatorText(condition.operator) }}
								<template
									v-if="['is_null', 'is_not_null', 'is_empty', 'is_not_empty'].includes(condition.operator)"
								></template>
								<template v-else-if="['between', 'not_between'].includes(condition.operator)">
									{{ condition.value[0] }} - {{ condition.value[1] }}
								</template>
								<template v-else>
									{{ condition.value }}
								</template>
							</a>
							<a href="javascript:void(0)" class="text-red-600 hover:text-red-800" @click="removeCondition(index)">
								<CloseOutlined />
							</a>
						</div>
					</div>

					<!-- <a-empty v-if="store.formData.itemConfig?.conditions.length === 0" description="暂无筛选条件" /> -->
				</div>
			</a-col>
			<a-col :span="12">
				<!-- 排序配置区域 -->
				<div class="sort-section">
					<div class="flex items-center justify-between mb-2">
						<span class="font-medium">排序</span>
						<!-- 排序编辑弹出层 -->
						<a-popover
							v-model:open="sortPopoverVisible"
							trigger="click"
							placement="bottom"
							:destroyTooltipOnHide="true"
						>
							<template #content>
								<div class="sort-editor p-4">
									<div class="flex items-center gap-2 mb-4">
										<a-select
											v-model:value="tempSort.field"
											placeholder="选择字段"
											class="w-60"
											:options="store.formData.itemConfig?.columns.map((col) => ({ value: col.key, label: col.title }))"
										>
										</a-select>
										<a-select v-model:value="tempSort.order" class="w-24">
											<a-select-option value="asc">正序</a-select-option>
											<a-select-option value="desc">倒序</a-select-option>
										</a-select>
									</div>
									<div class="flex justify-end gap-2">
										<a-button @click="sortPopoverVisible = false">取消</a-button>
										<a-button type="primary" @click="confirmSort">确定</a-button>
									</div>
								</div>
							</template>
							<a-button type="link" @click="addSort">添加排序</a-button>
						</a-popover>
					</div>
					<div v-if="store.formData.itemConfig?.sorts?.length > 0" class="sorts-list grid grid-cols-2 gap-2">
						<div v-for="(sort, index) in store.formData.itemConfig?.sorts" :key="index" class="flex items-center">
							<a
								href="javascript:void(0)"
								class="sort-link text-blue-600 hover:text-blue-800 mr-2"
								@click="editSort(sort, index)"
							>
								{{ getFieldName(sort.field) }} {{ getSortOrderText(sort.order) }}
							</a>
							<a href="javascript:void(0)" class="text-red-600 hover:text-red-800" @click="removeSort(index)">
								<CloseOutlined />
							</a>
						</div>
					</div>
					<!-- <a-empty v-else description="暂无排序配置" /> -->
				</div>
			</a-col>
		</a-row>
	</div>
</template>

<style scoped>
	.query-conditions {
		border: 1px solid #e5e7eb;
	}

	.filter-section,
	.sort-section {
		padding: 0 8px;
	}

	.filter-section {
		border-right: 1px solid #e5e7eb;
	}
</style>
